<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        #clock{
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 4px solid;
            border-color: black;
            margin: 50px auto;
            position: relative;

        }
        #s{

            width: 4px;
            height: 160px;
            background: red;
            position: absolute;
            top: 40px;
            left: 200px;
            transform-origin: bottom;
        }
        #m{
            width: 6px;
            height: 120px;
            background: blue;
            position: absolute;
            top: 80px;
            left: 200px;
            transform-origin: bottom;
        }
        #h{
            width: 6px;
            height: 80px;
            background: black;
            position: absolute;
            top: 120px;
            left: 200px;
            transform-origin: bottom;
        }
        #clock li{
            height: 20px;
            width: 4px;
            background: #000;
            list-style: none;
            position: absolute;
            left: 200px;
            top:0;
            transform-origin:0 200px
        }
        #clock li:nth-child(5n+1){
            height: 30px;
            width: 4px;
            background: #000;
        }
    </style>
</head>
<body>
<div id="clock">
    <ul id="scale">
</ul>
    <div id="h"></div>
    <div id="m"></div>
    <div id="s"></div>
</div>
<script>
    ( function a() {
        var oScale=document.getElementById("scale");
        for(var i=0;i<60;i++){
           var oLi=document.createElement("li");
            oScale.appendChild(oLi);
            oLi.style="transform: rotate("+ i * 6 +"deg)"
        }
            var oH=document.getElementById("h");
            var oM=document.getElementById("m");
            var oS=document.getElementById("s");
            run();
            setInterval(run,1000)
            function run() {
            var now=new Date();
            var nowS=now.getSeconds();
            var nowM=now.getMinutes();
            var nowH=now.getHours();
            oS.style.transform="rotate("+nowS*6+"deg)";
            oM.style.transform="rotate("+nowM*6+"deg)";
            oH.style.transform="rotate("+nowH*30+"deg)"}

}
    )()
</script>
</body>
</html>


























































